<div :class="calendarClass">
    <context-menu-container>
        <template>
            <div class="event-legends">
                <div :class="{'event-lengend':true, 'EMWO_INNER':true, 'event-disabled':!isShowlegend.EMWO_INNER}" @click="legendTrigger('EMWO_INNER')">
                    <div class="lengend-icon" style="background:rgba(0, 72, 255, 1);"></div>
                    <span style="color:;">内部工单</span>
                </div>
                <div :class="{'event-lengend':true, 'EMWO_OSC':true, 'event-disabled':!isShowlegend.EMWO_OSC}" @click="legendTrigger('EMWO_OSC')">
                    <div class="lengend-icon" style="background:rgba(255, 106, 0, 1);"></div>
                    <span style="color:;">外委工单</span>
                </div>
                <div :class="{'event-lengend':true, 'EMWO_DP':true, 'event-disabled':!isShowlegend.EMWO_DP}" @click="legendTrigger('EMWO_DP')">
                    <div class="lengend-icon" style="background:rgba(149, 117, 205, 1);"></div>
                    <span style="color:;">点检工单</span>
                </div>
                <div :class="{'event-lengend':true, 'EMWO_EN':true, 'event-disabled':!isShowlegend.EMWO_EN}" @click="legendTrigger('EMWO_EN')">
                    <div class="lengend-icon" style="background:rgba(0, 204, 255, 1);"></div>
                    <span style="color:;">能耗工单</span>
                </div>
            </div>
            <FullCalendar
                ref="calendar"
                :locale="$i18n.locale"
                height="parent"
                :firstDay="1"
                :eventLimit="true"
                :editable="!isSelectFirstDefault && true"
                :buttonText="buttonText" 
                :header="header"
                :plugins="calendarPlugins"
                :events="searchEvents.bind(_self)"
                :customButtons="{gotoDate: {text: $t('app.calendar.gotoDate'),click: this.openDateSelect.bind(_self)}}"
                :validRange="validRange"
                :defaultDate="defaultDate"
                :eventRender="eventRender.bind(_self)"
                @dateClick="onDateClick.bind(_self)"
                @eventClick="onEventClick.apply(_self, arguments)"
                @eventDrop="onEventDrop.bind(_self)"
                defaultView="dayGridMonth"
            ></FullCalendar>
            <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name="date-select-modal" @on-ok="gotoDate()">
                <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker>
            </modal>
        </template>
    </context-menu-container>
</div>
